<template>
  <div>
    <div class="flex space-x-3">
      <div>
        <RemoteAvatar :url="item.fromAvatar"></RemoteAvatar>
      </div>
      <div class="flex-1 space-y-3">
        <div class="flex justify-between">
          <div class="text-gray-400 font-bold">
            {{ item.fromUsername }}
          </div>
          <div class="text-gray-500 ">
            回复于{{ dayjs(item.createdAt).fromNow() }}
          </div>
        </div>
        <div class="text-lg">
          <n-text type="success" class="text-gray-400 font-bold">@{{ item.toUsername }}</n-text>
          {{ item.fromContent }}
        </div>
        <!--        <div class="bg-gray-200 opacity-90 rounded-lg border p-1">-->
        <!--          "{{ item.toContent }}"-->
        <!--        </div>-->
        <div>
          <div class="flex space-x-3">
            <n-button text @click="handleCopy(item.fromContent)">
              <TextIcon icon="ph:copy-bold" text="复制" :size="15"></TextIcon>
            </n-button>
            <n-button text>
              <TextIcon icon="mdi:thumb-up-outline" :size="15">
                <template #text>
                  {{ item.likes === 0 || !item.likes ? '点赞' : item.likes }}
                </template>
              </TextIcon>
            </n-button>

            <n-button v-if="!isShow" text @click="handleReply">
              <TextIcon icon="carbon:mail-reply" text="回复" :size="15"></TextIcon>
            </n-button>
            <n-button type="warning" v-else text @click="isShow=false">
              <TextIcon icon="tabler:mail-cancel" text="取消回复" :size="15"></TextIcon>
            </n-button>
          </div>
        </div>

        <div ref="target" v-if="isShow">
          <ReplyInput ref="replyInputRef"
                      @replySuccess="replySuccess"
                      :comment-id="item.commentId"
                      :to-id="item.fromId"
                      :to-username="item.fromUsername"
                      :to-avatar="item.fromAvatar"
                      :to-content="item.fromContent"></ReplyInput>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import dayjs from "@/utils/dayjs";
import {nextTick, PropType, ref} from "vue";
import {useClipboard, onClickOutside} from "@vueuse/core";
import RemoteAvatar from "@/components/pc/avatar/RemoteAvatar.vue";
import ReplyInput from "@/components/pc/input/ReplyInput.vue";
import TextIcon from "@/components/pc/icon/TextIcon.vue";

const {copy} = useClipboard()

const target = ref()

onClickOutside(target, () => isShow.value = false)
defineProps({
  item: {
    type: Object as PropType<IReply>,
    default: () => {
    }
  }
})
const emits = defineEmits(['replySuccess'])


const replyInputRef = ref()

const isShow = ref(false)

const handleReply = () => {
  isShow.value = true
  nextTick(() => {
    replyInputRef.value.doInputFocus()
  })
}

const handleCopy = (val: string) => {
  window.$message.success('复制成功')
  copy(val)
}
const replySuccess=(val:any)=>{
  emits('replySuccess',val)
}

</script>

<style scoped>

</style>